/*
 * @Description:
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2023-10-16 16:58:47
 * @LastEditors: Seven
 * @LastEditTime: 2023-11-01 10:46:41
 */
import { Table, Button, message } from "antd";
import React, { PureComponent } from "react";
import {
  getEndmaintenance,
  getMaintenanceDelete,
  getMaintenanceEdit,
  getMaintenanceList,
  getStartmaintenance,
} from "@/services/modules/plan";
import TopBanners from "./TopBanners";
import AddModal from "./AddModal";
import TopBanner from "@/components/TopBanner";
import DetailModal from "./DetailModal";
import { WorkRepairDownWrapperDiv } from "./styled";
import TopTitle from "@/components/TopTitle";

export default class WorkRepair extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableList: [],
      modalVisible: false,
      isModalDetailOpen: false,
      pageNum: 1,
      pageSize: 10,
      total: null,
    };
  }
  componentDidMount() {
    this.getList();
  }
  getList = () => {
    const {
      maintenanceId,
      maintenanceDesc,
      speciality,
      status,
      line,
      pageNum,
      pageSize,
    } = this.state;
    getMaintenanceList(
      maintenanceId,
      maintenanceDesc,
      speciality,
      status,
      line,
      pageNum,
      pageSize
    ).then((res) => {
      console.log(res, "🚀");
      if (res.code === 200) {
        this.setState({
          tableList: res.rows,
          total: res.total,
        });
      }
    });
  };
  search = (obj) => {
    this.setState(
      {
        maintenanceId: obj.maintenanceId ? obj.maintenanceId : "",
        maintenanceDesc: obj.maintenanceDesc ? obj.maintenanceDesc : "",
        speciality: obj.speciality ? obj.speciality : "",
        line: obj.line ? obj.line : "",
        status: obj.status ? obj.status : "",
      },
      () => {
        this.getList();
      }
    );
  };
  AddHandleClick = () => {
    this.setState({
      modalVisible: true,
      title: "新增",
    });
  };
  handleCancel = () => {
    this.setState({
      modalVisible: false,
      title: "",
    });
  };
  deleteBtnHandle = (id) => {
    getMaintenanceDelete(id).then((res) => {
      if (res.code === 200) {
        this.getList();
      }
    });
  };
  detailHandle = (id) => {
    getMaintenanceEdit(id).then((res) => {
      if (res.code === 200) {
        this.setState({
          yearInfo: res.data,
          isModalDetailOpen: true,
        });
      }
    });
  };
  handleDetailCancel = () => {
    this.setState({
      isModalDetailOpen: false,
    });
  };
  EditHandle = (record) => {
    console.log(record, "res+_++++");
    this.setState({
      modalVisible: true,
      rowInfoData: record,
      title: "编辑",
    });
  };
  startBtnHandle = (id) => {
    getStartmaintenance(id).then((res) => {
      if (res.code === 200) {
        message.success("开始检修");
      } else {
        message.warning(res?.msg);
      }
    });
  };
  endBtnHandle = (id) => {
    getEndmaintenance(id).then((res) => {
      if (res.code === 200) {
        message.success("结束检修");
      } else {
        message.warning(res?.msg);
      }
    });
  };
  render() {
    const {
      tableList,
      modalVisible,
      isModalDetailOpen,
      yearInfo,
      rowInfoData,
      title,
    } = this.state;
    const columns = [
      {
        title: "工单编号",
        dataIndex: "maintenanceId",
        key: "maintenanceId",
        align: "center",
      },
      {
        title: "工单描述",
        dataIndex: "maintenanceDesc",
        key: "maintenanceDesc",
        align: "center",
      },
      {
        title: "专业",
        dataIndex: "speciality",
        key: "speciality",
        align: "center",
      },
      {
        title: "线路",
        dataIndex: "line",
        key: "line",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "status",
        key: "status",
        align: "center",
        render: (text, record) => {
          return (
            <>
              {/* <Button
                style={{ marginRight: "10px" }}
                onClick={() => {
                  this.detailHandle(record.id);
                }}
                type="primary"
              >
                查看详情
              </Button> */}
              <Button
                style={{ marginRight: "10px" }}
                onClick={() => {
                  this.deleteBtnHandle(record.id);
                }}
                type="primary"
              >
                删除
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.EditHandle(record);
                }}
                style={{ marginRight: "10px" }}
              >
                编辑
              </Button>
              <Button
                style={{ marginRight: "10px" }}
                onClick={() => {
                  this.startBtnHandle(record.id);
                }}
                type="primary"
              >
                开始检修
              </Button>
              <Button
                onClick={() => {
                  this.endBtnHandle(record.id);
                }}
                type="primary"
              >
                结束检修
              </Button>
            </>
          );
        },
      },
    ];
    //分页
    const paginationProps = {
      showTotal: (total) => {
        return (
          <span
            style={{
              fontSize: 16,
              color: "#fff",
              fontFamily: "微软雅黑",
            }}
          >
            共{total}条数据
          </span>
        );
      },
      total: this.state.total,
      pageSize: this.state.pageSize,
      onChange: (pageNum, pageSize) => {
        this.setState(
          {
            pageNum: pageNum,
            pageSize: pageSize,
          },
          () => {
            this.getList();
          }
        );
      },
      current: this.state.pageNum,
    };
    return (
      <WorkRepairDownWrapperDiv>
        <TopTitle title="检修工单" />
        <TopBanners search={this.search.bind(this)} />
        <TopBanner AddHandleClick={this.AddHandleClick} />

        <Table
          dataSource={tableList}
          columns={columns}
          rowKey={"id"}
          pagination={paginationProps}
        />
        {modalVisible && (
          <AddModal
            handleCancel={this.handleCancel.bind(this)}
            modalVisible={modalVisible}
            getList={this.getList}
            rowInfoData={rowInfoData}
            title={title}
          />
        )}
        {isModalDetailOpen && (
          <DetailModal
            isModalDetailOpen={isModalDetailOpen}
            handleDetailCancel={this.handleDetailCancel}
            yearInfo={yearInfo}
          />
        )}
      </WorkRepairDownWrapperDiv>
    );
  }
}
